<template>

    <div style="padding: 20px;">
        <!--直播信息-->
        <div class="live_content">
            <label for="yaoyuejihua" class="yaoyuejihua_label">直播信息</label>
            <div class="live_info_content">
                <img :src="livemanager.conver" class="live_info_img" />
                <div class="info_content">
                    <div class="title_content">{{ livemanager.title }}</div>
                    <div class="shijian_content">直播时间：{{ livemanager.start_time }} 至 {{ livemanager.end_time }}</div>
                </div>

            </div>
        </div>

        <!-- 邀约计划 -->
        <div class="plan_content" v-if="planlist">
            <label for="yaoyuejihua" class="yaoyuejihua_label">邀约计划</label>
            <div style="display:flex;align-items: center;">
                <el-button v-if="showAdd" style="width: 200px;" type="primary" @click="addPlan"
                    v-show="hasPermission('live:invitation:add')">创建邀约计划</el-button>
                <span style="margin-left: 50px;">总邀约人数：{{ renshu }}，邀约成功人数：{{ renshu_hav }}</span>
            </div>

            <!--按照日期分组展示被邀约人每天个数-->
            <label for="yaoyuejihua" class="yaoyuejihua_label">每日邀约人数({{usernumbydate_num}})</label>
            <div class="scroll-container"  style="margin-top: 10px;">
                <div class="content">
                    <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;"
                        v-for="v in usernumbydate" :key="v.id">
                        <div class="plan_content_item3">
                            <div>{{v.date}}</div>
                            <div>邀约人数：{{ v.num }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <!--邀约计划列表-->
            <label for="yaoyuejihua" class="yaoyuejihua_label">邀约计划列表</label>
            <div class="scroll-container" style="margin-top: 10px;">
                <div class="content">
                    <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;"
                        v-for="v in planlist" :key="v.id">
                        <div @click="clickjihua(v.id)"
                            :class="v.id == planid ? 'plan_content_item2' : 'plan_content_item'">
                            <div>实际/预计邀约客户</div>
                            <div class="plan_jishu">{{ v.count_hav }}/{{ v.count }}</div>
                            <div>所属计划：{{ v.title }}</div>
                            <div>创建人：{{ v.nick_name }}</div>
                        </div>
                        <el-button style="color: blue;margin-top: 5px;" @click="copytext(v.desc)">复制邀约话术</el-button>
                    </div>
                </div>
            </div>


        </div>


        <!--我的邀约列表-->
        <el-form :inline="true" ref="form" :model="form" label-width="80px"
            style=" display: flex;flex-direction: column;">
            <label for="yaoyuejihua" class="yaoyuejihua_label">我的邀约明细</label>
            <div>
                <el-form-item label="客户名称" prop="wx_name">
                    <el-input placeholder="请输入客户名称" v-model="form.order_num"></el-input>
                </el-form-item>
                <el-form-item label="邀约状态" prop="invitation_status">
                    <el-select v-model="form.invitation_status" placeholder="请选择">
                        <el-option label="待邀约" value="1"></el-option>
                        <el-option label="已邀约" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="到课状态" prop="signin_status">
                    <el-select v-model="form.signin_status" placeholder="请选择">
                        <el-option label="未到课" value="1"></el-option>
                        <el-option label="已到课" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">搜索</el-button>
                    <el-button @click="resetForm('form')">重置</el-button>
                    <el-button @click="init()">刷新</el-button>
                </el-form-item>
            </div>
        </el-form>
        <div class="table-wrap">
            <el-table :data="tableData" v-loading="loading" style="width: 100%;margin-bottom: 20px;" row-key="id" border
                stripe default-expand-all>
                <el-table-column prop="nickname" label="客户名称"></el-table-column>
                <el-table-column prop="invitation_status" label="邀约状态">
                    <template slot-scope="scope">
                        {{ scope.row.invitation_status == 2 ? '已邀约' : '未邀约' }}
                        <!-- {{ scope.row.invitation_status == 2 ? '<span style="font-size:12pt;color:green;">·</span>已邀约' :
                        '<span style="font-size:12pt;color:red;">·</span>待邀约' }} -->
                    </template>
                </el-table-column>
                <el-table-column prop="signin_status" label="到课状态">
                    <template slot-scope="scope">
                        {{ scope.row.signin_status == 2 ? '已到课' : '未到课' }}
                        <!-- {{ scope.row.signin_status == 2 ? '<span style="font-size:12pt;color:green;">·</span>已到课'
                            : '<span style="font-size:12pt;color:red;">·</span>未到课'  }} -->
                    </template>
                </el-table-column>
                <el-table-column prop="online_duration" label="直播观看时长"></el-table-column>
                <el-table-column prop="chengjiao_status" label="成交状态">
                    <template slot-scope="scope">
                        {{ scope.row.chengjiao_status == 2 ? '已下单' : '未下单' }}
                        <!-- {{ scope.row.chengjiao_status == 2 ? '<span style="font-size:12pt;color:red;">·</span>未下单' :
                         '<span style = "font-size:12pt;color:green;" >·</span>已下单' }} -->
                    </template>
                </el-table-column>
                <el-table-column prop="chengjiao_money" label="成交金额(元)"></el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="form.pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="form.pageSize"
                    background layout="total, sizes, prev, pager, next, jumper" :total="form.total"> </el-pagination>
            </div>
        </div>
    </div>

</template>


<script>


import Panle from '@/components/Panle';
import { getUserInfo } from '@/api/live/invitation';
import PersButton from '@/components/PersButton';
import { hasPermission } from '@/common/permission'

export default {
    components: {
        Panle,
        PersButton
    },
    data() {
        return {
            loading: false,
            livemanager: '',
            sendername: '',
            tableData: [],
            planlist: [],
            planid: '',
            liveId: this.$route.query.liveId,
            venue: this.$route.query.venue,
            form: {
                yiyaoyue: 0,
                daiyaoyue: 0,
                wx_name: '',
                invation_status: '',
                signin_status: '',
                planid: '',
                sender: '',
                liveId: this.$route.query.liveId,
                venue: this.$route.query.venue,
                pageSize: 10,
                pageNumber: 1,
                total: 0
            },
            showAdd: true,
            renshu: 0,
            renshu_hav: 0,
            usernumbydate:[],
            usernumbydate_num:0
        }
    },
    created() {

        // // 或者通过$route获取参数
        // console.log(this.$route.query.liveId);
        // // this.init();
        // this.$watch(() => this.$route.path, () => {
        //     console.log(this.$route.path);
        //     if (this.$route.path === '/live/invitation') {
        //         // 刷新页面数据的方法
        //         // this.refreshData();
        //         console.log('刷新页面');
        //         this.init();
        //     }
        // });
    },
    activated() {
        // 在页面返回时数据刷新
        console.log('activated');
        this.init();

    },
    methods: {
        hasPermission,
        init() {
            this.loading = true;
            console.log(this.form);
            getUserInfo(this.form).then((res) => {
                console.log(res);
                this.tableData = res.data.list;
                this.form.total = res.data.total;
                this.sender = res.data.sender;
                this.livemanager = res.data.livemanager;
                this.planlist = res.data.planlist;
                this.renshu = res.data.renshu;
                this.renshu_hav = res.data.renshu_hav;
                this.usernumbydate = res.data.usernumbydate;
                this.usernumbydate_num = res.data.usernumbydate_num;
                this.loading = false;

                if (this.planid == '' && this.planlist.length > 0) {
                    this.planid = this.planlist[0].id;
                }

                const date1 = new Date(this.livemanager.end_time);
                const date2 = new Date();
                console.log(date1, date2);
                if (date1 <= date2) {  //已经关闭
                    this.showAdd = true;
                }
            })


        },
        search: function () {
            this.loading = true;
            this.form.pageSize = 10;
            this.form.pageNumber = 1;
            this.init();
        },
        handleSizeChange: function (e) {
            console.log(e);
            this.form.pageSize = e;
            this.init();
        },
        handleCurrentChange: function (e) {
            console.log(e);
            this.form.pageNumber = e;
            this.init();
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.init();
        },
        addPlan() {

            console.log('addinvitation');
            this.$router.push({ path: '/live/addinvitation?liveId=' + this.liveId + '&sender=' + this.sender.user_name + '&venue=' + this.livemanager.venue + '&sendername=' + this.sender.nick_name });

        },
        clickjihua(id) {
            this.loading = true;
            this.planid = id;
            this.form.planid = id;
            this.init();
        },
        copytext(desc) {
            console.log(desc);
            const input = document.createElement('input');
            input.value = desc; // 获取要复制的文本
            document.body.appendChild(input);
            input.select(); // 选中文本
            document.execCommand('copy'); // 执行复制操作
            document.body.removeChild(input); // 移除临时的输入框
            // alert('文本已复制到剪贴板'); // 可选：给用户反馈
            this.$notify({
                message: '文本已复制到剪贴板',
                type: 'success'
            });
        }

    }
}


</script>


<style lang="scss" scoped>
.scroll-container {
    display: flex;
    margin-top: 10px;
    width: 100%;
    /* 设置容器宽度 */
    overflow-x: auto;
    /* 使得当内容宽度超过容器宽度时可以横向滚动 */
}

.content {
    display: flex;
    white-space: nowrap;
    /* 防止内容换行 */
    padding: 5px;
}

.line {
    width: 100%;
    height: 20px;
}

.plan_content {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    margin-bottom: 20px;
}

.plan_content_item {
    /* width: 200px; */
    height: 120px;
    border-width: 1px;
    border-color: rgb(245, 247, 251);
    border-style: solid;
    background-color: rgb(245, 247, 251);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-left: 20px;
    padding: 10px;
}

.plan_content_item2 {
    /* width: 200px; */
    height: 120px;
    border-width: 1px;
    border-color: blue;
    border-style: solid;
    background-color: rgb(245, 247, 251);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-left: 20px;
    padding: 10px;
}

.plan_content_item3 {
    /* width: 200px; */
    height: 80px;
    border-width: 1px;
    border-color: rgb(245, 247, 251);
    border-style: solid;
    background-color: rgb(245, 247, 251);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-left: 20px;
    padding: 10px;
}

.plan_jishu {
    color: black;
    font-weight: bold;
    font-size: large;
}

.live_info_content {
    display: flex;
}

.live_info_img {
    width: 100px;
}

.info_content {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-left: 20px;
}

.title_content {
    font-size: medium;
    font-weight: bold;
}

.shijian_content {
    font-size: medium;
}

.yaoyuejihua_label {
    font-size: medium;
    font-weight: bold;
    margin-bottom: 20px;
    margin-top: 20px;
}


.live_content {
    display: flex;
    flex-direction: column;
}
</style>